<template>
	<view class="container">
		<view class="search" @click="goStudentSearch">
			<text class="search-hint">支持学生信息模糊搜索</text>
			<image class="search-img" src="/static/report/search.png"></image>
		</view>
		<view class="grade" v-if="showGrade">
			<text class="stub">-</text>
			<custom-select class='select' :selectData="gradeList" :currentValue="currentValue" @change='gradeChange' :name="keyName"></custom-select>
			<text class="stub">-</text>
		</view>
		<collapse :collapseData="classesList" @itemClick = 'itemClick'></collapse>
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index';
	import Collapse from '../fragments/Collapse';
	import CustomSelect from '../fragments/CustomSelect';
	import ReportService from '@/services/report/index';
	const reportService = new ReportService();
	export default {
		components: {
			CustomSelect,
			Collapse
		},
		props: {
			parentIndex: {
				type: Number,
				default: 0
			},
			selfIndex: {
				type: Number,
				default: 0
			},
			ascription: 0
		},
		data() {
			return {
				noData:false,
				gradeList: [],
				classesList: [],
				keyName:"name",
				currentValue:""
			}
		},
		computed: {
			showGrade() {
				return !isEmpty(this.gradeList);
			}
		},
		watch:{
			parentIndex(newValue){
				this.getGrade();
			}
		},
		mounted() {
			if(this.parentIndex==this.selfIndex){
				this.getGrade();
			}
		},
		methods: {
			goStudentSearch() {
				uni.navigateTo({
					url: "/pages/report/studentSearch?ascription="+this.ascription
				})
			},
			itemClick(classId){
				uni.navigateTo({
					url:'/pages/report/studentList?ascription='+this.ascription+'&classId='+classId
				})
			},
			//获取届下拉列表
			getGrade() {
				if(!isEmpty(this.gradeList)){
					return;
				}
				reportService.period().then(response => {
					if (response.success) {
						this.gradeList = response.result;
						if(isEmpty(this.gradeList)){
							this.noData = true;
							return;
						}
						const curItem = this.gradeList[0];
						if(!isEmpty(curItem)){
							this.currentValue = curItem[this.keyName];
							this.getClassesList(curItem.value);
						}
					} else {
						uni.showToast({
							title: response.message,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			gradeChange(item){
				this.currentValue = item[this.keyName];
				this.getClassesList(item.value);
			},
			//获取班级折叠列表
			getClassesList(grade) {
				if (isEmpty(grade)) {
					return;
				}
				const param = {grade:grade};
				reportService.classList(param).then(response => {
					if (response.success) {
						this.classesList = response.result;
					} else {
						uni.showToast({
							title: response.message,
							icon: 'none',
							duration: 2000
						})
					}
				});
			}
		}
	}
</script>


<style lang="scss" scoped>
	.container {
		background-color: #ffffff;
		padding: 0 20upx;
	}

	.search {
		margin: 40upx 0;
		height: 80upx;
		line-height: 70upx;
		box-shadow: 0 4upx 20upx 0 rgba(153, 153, 153, 0.15);
		border-radius: 8upx;
		border: solid 2upx #f7f7f7;
		padding: 0 20upx;
		display: flex;

		&-hint {
			flex: 1;
			font-size: 28upx;
			color: #999999;
		}

		&-img {
			margin-top: 28upx;
			width: 26upx;
			height: 26upx;
		}
	}

	.stub {
		color: #4a96f2;
		font-weight: 800;
	}

	.select {
		display: inline-block;
		width: 240upx;
		height: 60upx;
		line-height: 60upx;
		font-size: 28upx;
		color: #333333;
		background-color: #ffffff;
		border-radius: 8upx;
		border: solid 2upx #4a96f2;
		margin: 0 20upx;
	}

	.grade {
		text-align: center;
	}
</style>
